<template>
	<view class="ListView">
		<view class="content">

			<z-paging ref="paging" v-model="dataList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>


					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="add">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>


					<u-navbar :fixed="false" title="模具管理" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>
					<view class="TabsBox1">
						<view class="example-body">
							<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
								@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
								:clearIcon="false" type="daterange" :end="EndDate"
								rangeSeparator="至"></uni-datetime-picker>
						</view>
						<view style="width: 10%;display: flex;align-items: center;justify-content: end;">
							<uni-icons fontFamily="CustomFontPlatform" style="font-weight: 600;" color="#999"
								@click="OpenFilterPopup" :size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>
						</view>

					</view>

				</template>

				<view style="padding: 0 10px;">
					<view class="CardBox" @click="itemClick(row,index)" v-for="(row, index) in dataList" :key="index">
						<view class="CardMainBox">


							<view style="color:black;font-size:28rpx;margin-top:8px">
								<text>{{row.BillNO}}</text>
							</view>
							<view style="margin-top: 8px;">

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="单据号:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillNO}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="单据日期:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillDate}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="EnableApplyForShow" :borderBottom="false" label="申请人:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ApplicantName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="EnableApplyForShow" :borderBottom="false" label="申请时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ApplicationTime}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="EnableApplyForShow" :borderBottom="false" label="申请状态:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ApplicationStatusName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									v-show="EnableApplyForShow" :borderBottom="false" label="申请结果:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ApplicationResultName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="报废状态:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ScrapStatusName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="报废时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ScrapTime}}</text>
										</view>
									</template>
								</m-field>
							</view>
						</view>
					</view>

				</view>
				<template #bottom>
					<tab-bar ref="tabbar" :backData='moduleData_show' :groups='groups'></tab-bar>
				</template>

			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="ShowFilterPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeFilterPopup">
			<view class="f-dc" style="height: 50vh;" :style="$utils.disposeSafeBottomFun()">

				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="PopupMainBox">
					<view>
						<view class="TitleBox">
							<text>起止时间</text>
						</view>

						<view class="CheckBox">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>
									<view @click="addTime('开始')" class="My_Picker_Text">
										<text>{{FormData.FBDate}}</text>
									</view>
									<text>至</text>
									<view @click="addTime('结束')" class="My_Picker_Text">
										<text>{{FormData.FEDate}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view style="margin-top: 20px;">
						<view class="TitleBox">
							<text>报废人员</text>
						</view>
						<u-cell-group :border='false'>
							<u-cell :isLink="true" :title='FormData.EmplName' class="custom-cell"
								@click="openBaseScreen('报废人员','radio')"></u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="BottomBox">
					<button class="SaveBtn" @click="ResetBtn">重置</button>
					<button class="SubBtn" @click="submit">确认</button>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
				@confirm='pickerConfirm'></u-datetime-picker>
		</u-popup>

	</view>

</template>

<script>
	import {
		formatDateTime,
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime,

	} from '@/st_mold/common/base.js';
	import TabBar from '@/st_mold/common/TabBar.vue'; // 引入底部导航栏组件
	import BaseMixin from '@/st_mold/common/base.js';
	export default {
		components: {
			TabBar
		},
		mixins: [BaseMixin],
		data() {
			return {
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
				ShowFilterPopup: false,
				MJBFSQRList: [], // 报废申请结果列表
				MJBFSList: [], // 报废状态列表
				MJBFSQList: [], //报废申请确认状态列表
				MJZTList: [], //模具状态列表
				disabled: false,
				dataList: [],
				PickerIndex: 1, // 时间弹层的层级
				StartDate: null, // 限制开始时间
				EndDate: Date.now(), // 结束时间
				singleTimes: [getBefore7DateTime(), getFormatDateTime(new Date())], // 日期选择控件
				FormData: {
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
					EmplName: '',
					EmplID: null,
					FType: 'BF',
				},

				TimeName: '', //时间名称
				show: false, //时间刷筛选是否显示
				value1: Number(new Date()), //时间值
				moduleData_show: [], //底部导航栏总数组
				groups: [], //底部导航栏数组，分成三个
				EnableApplyForNum: null, //EnableApplyFor值
				EnableApplyForShow: true, //判断详情页面EnableApplyFor是否等于1
			}

		},
		onUnload() {
			var that = this;

			uni.$off('st_mold_Choice');
		},

		onLoad() {
			var that = this;

			
			// 使用 Promise.all 确保所有数据加载完成
			// 先初始化数据
			that.initData()
			
			that.FormData.FBDate = getBefore7DateTime() //开始时间
			that.FormData.FEDate = getFormatDateTime(new Date()) //结束时间
			// 用户id
			that.FormData.EmplID = that.FormData.EmplID ? that.FormData.EmplID : that.$store
				.state.UserInfo.EmplID
			// 用户名称
			that.FormData.EmplName = that.FormData.EmplName ? that.FormData.EmplName : that
				.$store.state.UserInfo.UserName
			that.moduleData_show = that.$store.state.CRaftModule.ModuleData //底部导航栏总数组
			that.groups = that.$store.state.CRaftModule.groups //底部导航栏数组，分成三 个
			// 列表顶部时间筛选
			that.singleTimes = [that.FormData.FBDate, that.FormData.FEDate]

			
		},

		onShow() {
			this.getList
			this.addst_mold_Choice()


		},
		mounted() {
			var that = this;
			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})
			this.addst_mold_Choice()
		},

		methods: {

			async initData() {
				// 加载公共字典数据
				await this.loadCommonDictionaries([{
						type: 'ALL',
						key: 'MJZTList'
					},
					{
						type: 'MJBFSQR',
						key: 'MJBFSQRList'
					},
					{
						type: 'LYGHWS',
						key: 'LYGHWSList'
					},
					{
						type: 'MJBFSQ',
						key: 'MJBFSQList'
					},
					{
						type: 'MJBFS',
						key: 'MJBFSList'
					}
				]);


			},


			addst_mold_Choice() {
				var that = this;
				uni.$on('st_mold_Choice', function(ret) {

					if (ret.type == '报废人员') {
						that.FormData.EmplName = ret.data.EmplName
						that.FormData.EmplID = ret.data.EmplID
					}
				});
			},
			openBaseScreen(str, type) { // 前往筛选页
				let that = this;
				let obj = null;
				let url = '/commonPage/Tool/baseScreen';
				if (str == '报废人员') {
					obj = {
						allowClear: false,
						cmd: 'MJ_RYSet',
						type: str,
						ListeningName: 'st_mold_Choice',
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'EmplName', //搜索关键词，应包含在param中
							showText: 'EmplName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'EmplID',
							ChoiceDataData: that.FormData.EmplID,
						},
						param: {
							EmplName: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				}
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})
				uni.navigateTo({
					url: url
				})
			},
			ChangeDate() { // 修改日期
				var that = this;
				that.PickerIndex = 1;


				that.FormData.FBDate = that.singleTimes[0]
				that.FormData.FEDate = that.singleTimes[1]
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			closeFilterPopup() { // 关闭筛选弹层
				this.ShowFilterPopup = false;
			},
			OpenFilterPopup() { // 点击打开筛选
				this.ShowFilterPopup = true;
			},
			changeTab(item) { // 切换tab任务
				var that = this;
				that.FormData.MaintenanceStatus = item.data.value
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			// 刷新列表
			getList() {
				let that = this;
				that.contents = []; // 假设这是异步获取数据的操作
				that.addst_mold_Choice()
				that.$refs.paging.reload();
			},
			GetStatusBackClass(data) { // 根据传入的单据状态值，返回对应的class
				return 'OrderStatus_' + data
			},



			//获取时间
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},
			//获取点击的时间进行赋值
			pickerConfirm(e) {
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
				this.show = false
			},
			// 重置
			ResetBtn() {
				let that = this;
				this.FormData.FBDate = getBefore7DateTime()
				this.FormData.FEDate = getFormatDateTime(new Date())
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
				this.FormData.EmplID = this.$store.state.UserInfo.EmplID
				this.FormData.EmplName = this.$store.state.UserInfo.UserName
			},
			// 筛选提交 重新加载
			submit() {

				this.ShowFilterPopup = false;
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			// 新增
			add() {
				var url = './ScrapDetail'
				this.GonavigateTo(url)
			},



			// 获取详情老板
			queryList(pageNo) {
				let that = this;
				that.FormData.PageIndex = pageNo
				uni.showLoading({
					title: '加载数据中...',
				});
				try {
					that.Request.request('MJ_BFList', this.FormData, function(ret) {
						console.log(ret)
						if (ret.status == 200) {
							uni.hideLoading();
							ret.data.ds.map((item) => {

								item.BillDate = formatDateTime(item.BillDate)
								item.CKTime = formatDateTime(item.CKTime)
								item.ApplicationTime = formatDateTime(item.ApplicationTime)
								item.ConfirmTime = formatDateTime(item.ConfirmTime)
								item.ScrapTime = formatDateTime(item.ScrapTime)


								const dictMappings = {
									ApplicationStatus: {
										dictKey: 'MJBFSQ',
										targetField: 'ApplicationStatusName'
									},
									ApplicationResult: {
										dictKey: 'MJBFSQR',
										targetField: 'ApplicationResultName'
									},
									ScrapStatus: {
										dictKey: 'MJBFS',
										targetField: 'ScrapStatusName'
									}
								};
								that.mapDictNamesForItem(item, dictMappings);


							})
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					uni.hideLoading();
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}
			},
			// 点击列表详情
			itemClick(item, index) {
				var url = `./ScrapDetail?ScrapID=${item.ScrapID}`
				this.GonavigateTo(url)
			},
			// 跳转
			GonavigateTo(url) {
				let that = this;
				if (that.disabled == false) {
					// 立即禁用点击
					that.disabled = true
					uni.navigateTo({
						url: url,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});
					setTimeout(() => {
						that.disabled = false
					}, 2000)
				}

			}

		}
	}
</script>

<style lang="scss">
	@import "./css/index.scss";
</style>